<template>
  <div id="kanyu-pdf" class="app-container" style="font-family: '微软雅黑'">
    <!-- {{ $route.params.salonid }} - {{ $route.query.scode }} -->
    <div style="width: 100%; height: 50px">
      <img src="@/assets/images/kanyu_title.png" height="100%">
    </div>
    <div
      style="
        position: absolute;
        width: 54px;
        height: 60px;
        top: 0px;
        right: 30px;"
    >
      <img src="@/assets/images/kanyu_txs_logo.png" height="100%">
    </div>
    <pre
      style="
        margin: 0;
        width: 100%;
        height: 20px;
        background-color: #E5BE00;
        font-family: '微软雅黑';
        font-size: small;
        line-height: 20px;
      "
    >  S T O R E    P R O F I T    S Y S T E M</pre>
    <div class="salon-info">
      <div style="width: 25%;text-align: center;">{{ kanyuObj.start }} 起 到 {{ kanyuObj.stop }} 至</div>
      <div style="width: 50%;">门店名称： {{ $route.query.sname }}</div>
      <div style="width: 25%;">门店编号：{{ $route.query.scode }}</div>
    </div>

    <el-row :gutter="0">
      <el-col :span="14" :offset="0">
        <div class="item-img">
          <img src="@/assets/images/kanyu_1.png" height="100%">
        </div>
        <el-form class="sheet-content" label-width="110px">
          <el-row :gutter="0">
            <el-col :span="12" :offset="0">
              <span>坐向：</span>{{ kanyuObj.position }}<br>
              <span>五虎杀位：</span>{{ kanyuObj.ky?kanyuObj.ky[0]:'' }}<br>
              <span>太岁位：</span>{{ kanyuObj.ky?kanyuObj.ky[1]:'' }}<br>
              <span>坐盘取格之好：</span><span style="font-size: 14px;font-weight: 100;color: black;">{{ kanyuObj.ky?kanyuObj.ky[2]:'' }}</span><br>
              <span>流年盘取星之好：</span>{{ kanyuObj.ky?kanyuObj.ky[3]:'' }}<br>
              <span>老板方位：</span>{{ kanyuObj.ky?kanyuObj.ky[4]:'' }}<br>
              <span>操作实施方位：</span>{{ kanyuObj.ky?kanyuObj.ky[5]:'' }}<br>
              <div style="height: 20px;" />
            </el-col>
            <el-col :span="12" :offset="0">
              <span>归元：</span>{{ kanyuObj.ky?kanyuObj.ky[6]:'' }}<br>
              <span>三杀位：</span>{{ kanyuObj.ky?kanyuObj.ky[7]:'' }}<br>
              <span>岁破位：</span>{{ kanyuObj.ky?kanyuObj.ky[8]:'' }}<br>
              <span>坐盘取格之差：</span>{{ kanyuObj.ky?kanyuObj.ky[9]:'' }}<br>
              <span>流年盘取星之差：</span>{{ kanyuObj.ky?kanyuObj.ky[10]:'' }}<br>
              <span>取财收银方位：</span>{{ kanyuObj.ky?kanyuObj.ky[11]:'' }}<br>
              <span>顾客休息方位：</span>{{ kanyuObj.ky?kanyuObj.ky[12]:'' }}<br>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="10" :offset="0">
        <div class="item-img">
          <img src="@/assets/images/kanyu_2.png" height="100%">
        </div>
        <el-image
          v-if="kanyuObj.pic !== null && kanyuObj.pic !== undefined"
          layz
          style="width: 100%; height: 186px;margin-top: 0px;margin-left: 10px;padding-right: 10px;"
          :src="kanyuObj.pic"
          fit="contain"
        />
      </el-col>
    </el-row>

    <el-form class="sheet-content" label-width="110px">
      <el-row :gutter="0">
        <el-col :span="2" :offset="0">
          <p>外局优点：</p><br>
          <p>外局缺点：</p><br>
          <p>内局优点：</p><br>
          <p>内局缺点：</p><br>
        </el-col>
        <el-col :span="10" :offset="0">
          <el-input
            v-model="kanyuObj.outadv"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
          />
          <el-input
            v-model="kanyuObj.outdisadv"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
          />
          <el-input
            v-model="kanyuObj.inadv"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
          />
          <el-input
            v-model="kanyuObj.indisadv"
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
          />
        </el-col>
        <el-col :span="12" :offset="0">
          <p style="text-align: center;">解决方案：</p>
          <el-input
            v-model="kanyuObj.solution"
            :autosize="{ minRows: 11, maxRows: 11 }"
            type="textarea"
            style="margin-left: 5px;"
          />
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="0">
      <el-col :span="1" :offset="0">
        <div style="height: 40px;width: 4px; background-color: black;margin-left: 30px;" />
      </el-col>
      <el-col :span="10" :offset="0">
        <span style="font-size:xx-small">SHOP COACH</span><br>
        <span style="font-weight: bolder;margin-right: 20px;">门店教练：</span>{{ kanyuObj.coach }}
      </el-col>
      <el-col :span="1" :offset="0">
        <div style="height: 40px;width: 4px; background-color: black;margin-left: 30px;" />
      </el-col>
      <el-col :span="10" :offset="0">
        <span style="font-size:xx-small">REVIEW</span><br>
        <span style="font-weight: bolder;margin-right: 20px;">审核：</span>{{ kanyuObj.checker }}
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button @click="getPDF">生成PDF</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getKanyu } from '@/api/txs'
import { getInAdv, getInDisadv, getOutAdv, getOutDisadv } from '@/utils/kanyu'
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'

export default {
  data () {
    return {
      kanyuObj: {}
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getKanyu(this.$route.params.salonid)
        .then(res => {
          this.kanyuObj = res.data.data
          // console.log(this.kanyuObj)
          loading.close()
          if (!this.kanyuObj || !this.kanyuObj.sid) {
            this.$notify({
              title: '失败',
              message: '请先输入门店的堪舆信息',
              type: 'error',
              duration: 0
            })
          } else {
            if (this.kanyuObj.outadv) {
              const lst = this.kanyuObj.outadv.split(',').map(Number)
              this.kanyuObj.outadv = getOutAdv().filter((item, index) => {
                if (index in lst) {
                  return item
                }
              }).join('\r\n')
            }
            if (this.kanyuObj.outdisadv) {
              const lst = this.kanyuObj.outdisadv.split(',').map(Number)
              this.kanyuObj.outdisadv = getOutDisadv().filter((item, index) => {
                if (index in lst) {
                  return item
                }
              }).join('\r\n')
            }
            if (this.kanyuObj.inadv) {
              const lst = this.kanyuObj.inadv.split(',').map(Number)
              this.kanyuObj.inadv = getInAdv().filter((item, index) => {
                if (index in lst) {
                  return item
                }
              }).join('\r\n')
            }
            if (this.kanyuObj.indisadv) {
              const lst = this.kanyuObj.indisadv.split(',').map(Number)
              this.kanyuObj.indisadv = getInDisadv().filter((item, index) => {
                if (index in lst) {
                  return item
                }
              }).join('\r\n')
            }
          }
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
    },
    getPDF() {
      const _this = this
      // 解决页面带滚动条的时候截图不全问题
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      // 需要转换的html元素
      const _articleHtml = document.getElementById('kanyu-pdf')
      const _w = _articleHtml.clientWidth
      const _h = _articleHtml.clientHeight

      // 解决生成的pdf不清晰的问题 先放大4倍----后面再缩小4倍
      const scale = 2
      // canvas.width = _w * scale
      // canvas.height = _h * scale
      // context.scale(scale, scale)
      canvas.width = _w * scale
      canvas.height = _h * scale
      // canvas.width = 841.89
      // canvas.height = 595.28
      context.scale(scale, scale)

      const opts = {
        // scale: 1,
        width: _w,
        height: _h,
        canvas: canvas,
        useCORS: true
      };
      (window.html2canvas || html2canvas)(_articleHtml, opts).then(canvas => {
        _this.createPdf(canvas, scale)
      })
    },
    createPdf(canvas, scale) {
      // 图片->pdf
      // -----------宽高缩小4倍---------------------
      // const contentHeight = canvas.height
      // const contentWidth = canvas.width
      // const contentHeight = 555.28
      // const contentWidth = 841.89
      const contentHeight = 640
      const contentWidth = 1010
      // --------------------
      let orientation = 'p'
      // 在 jspdf 源码里，如果是 orientation = 'p' 且 width > height 时， 会把 width 和height 值交换，
      // 类似于 把 orientation 的值修改为 'l' , 反之亦同。
      if (contentWidth > contentHeight) {
        orientation = 'l'
      }

      const pdf = new JSPDF(orientation, 'pt', [contentWidth, contentHeight])
      const pageData = canvas.toDataURL('image/jpeg', 1.0)

      // 这里只生成了一页的pdf，并未截断，需要截断的话在此处操作
      pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)

      // 将pdf的流文件---》file文件
      // const filename = 'temp.pdf'
      // pdf.save('aaaa.pdf')
      pdf.output('dataurlnewwindow')
      // const file = this.dataURLtoFile(datauri, filename)

      // console.log(datauri)

      // this.uploadPDF(file)
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 转换成file对象
      return new File([u8arr], filename, { type: mime })
      // 转换成成blob对象
      // return new Blob([u8arr],{type:mime});
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

h3 {
  color: #d14649;
  text-align: center;
}

.salon-info {
  display: flex;
  div {
    padding: 0 10px;
    font-size: 12px;
    line-height: 30px;
    margin-top: 10px;
    height: 33px;
    width: 33%;
    border: 1px solid #2d3a4b;
    margin-bottom: 20px;
  }
}

.item-img {
  height: 30px;
  margin-bottom: 10px;
}
.sheet-content {
  // margin-right: 30px;
  background-color: #f2f2f2;
  padding: 10px 10px 1px;
  margin-bottom: 10px;
  span {
    color:#E5BE00;
    font-weight: bold;
    font-size: larger;
  }
  p {
    font-weight: bolder;
    height: 25px;
  }
}
</style>
